<template>
    <div >
      <div class="clearfix bf-top-button">
        <div class="float-l">

          <el-button @click="showAdd" type="primary">新增</el-button>
        </div>
        <div class="float-r">
          <div class="float-l">
            <el-input
              placeholder="请输入角色名称进行搜索"
              prefix-icon="el-icon-search"
              v-model="searchData"
              @keyup.enter.native="quickSearch"
              >
            </el-input>
          </div>
          <!-- <div class="float-l padding-l">
            <el-button @click="showSearch" type="primary">高级筛选</el-button>
          </div> -->
        </div>
      </div>
      <div >
        <!-- <el-table :data="role.list" style="width: 100%" stripe>
          <el-table-column prop="roleName" label="角色名称"></el-table-column>
          <el-table-column prop="des" label="角色描述"></el-table-column>
          <el-table-column prop="roleId" label="角色id"></el-table-column>

          <el-table-column label="操作" width="50px">
            <template slot-scope="scope">
              <el-dropdown @command="showRowList">
                <span class="el-dropdown-link gray">
                  <i class="el-icon-more"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="{type:'edit', scope:scope}">编辑</el-dropdown-item>
                  <el-dropdown-item :command="{type:'delete', scope:scope}">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-box padding-t">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="$store.state.beneform4j.pageSizes"
          :page-size="$store.state.beneform4j.pageSize"
          :layout="$store.state.beneform4j.pageLayout"
          :total="role.page.total"
          @size-change = "pageChangeSize"
          @current-change = "pageChange"
          @prev-click = "pageChange"
          @next-click = "pageChange"
          >
        </el-pagination> -->
        <bf-table
          :data="role"
          :setting="formList"
          :rowAction="rowAction"
          @editSubmit="editSubmit"
          @pageChange="pageChange"
          :editRules="editRules"
          ref="table"
        ></bf-table>
      </div>
      <!-- <bf-table-search ref="bfTableSearch" :editForm="formList" @formSubmit="searchSubmit"></bf-table-search> -->
      <bf-table-add :editForm ='formList' ref='formAdd' @formSubmit='addSubmit' :editRules="editRules"></bf-table-add>
      <bf-table-edit :editForm ='formList' ref='formEdit' @formSubmit='editSubmit' :editRules="editRules"></bf-table-edit>
    </div>
  </template>
  <script>
  import { getRolesPage, deleteRole, addRole, editRole } from '@/beneform4j/api/role'
  export default {
    name: 'rolemanager',
    data() {
      return {
        // editRules: {},
        rowAction: [
          {
            label: '查看',
            click: (item) => {
              this.$refs.table.showDetail(item)
            }
          },
          {
            label: '编辑',
            click: (item) => {
              this.$refs.formEdit.show(item.scope)
            }
          },
          {
            label: '删除',
            click: (item) => {
              this.$confirm('删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                const id = item.scope.row.roleId
                deleteRole(id).then((response) => {
                  if (response.success) {
                    this.getList({})
                    this.$message({
                      message: '删除成功',
                      type: 'success'
                    })
                  }
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除操作'
                })
              })
            }
          }
        ],
        role: {},
        searchData: '',
        currentPage: 1,
        pageObj: {
          page: 1,
          pageSize: this.$store.state.beneform4j.pageSize
        },

        formList: [
          {
            title: '角色id',
            field: 'roleId',
            type: 'text',
            isHiden: true,
            hideEdit: true // 是否在编辑中可编辑
          },
          {
            title: '角色名称', // 标题
            field: 'roleName', // 对应的字段，唯一
            type: 'text', // form表单类型
            searchable: true // 是否可搜索
          },
          {
            title: '角色描述',
            field: 'des',
            type: 'text'
          },
          {
            title: '角色权限',
            field: 'rolePerms',
            type: 'rolepermission',
            isHiden: true
          }
        ],
        editRules: {
          roleName: [
            { required: true, message: '请输入角色名称', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
          ],
          des: [
            { required: true, message: '请输入角色描述', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
          ]
        },
        searchParams: { // 搜索条件
          page: 1
        }
      }
    },
    mounted: function() {
      this.getList({})
    },
    methods: {
      getList() {
        getRolesPage(this.searchParams).then((response) => {
          this.role = response
        })
      },
      showAdd: function() {
        this.$refs.formAdd.add()
      },
      quickSearch: function() {
        this.searchParams.roleName = this.searchData
        this.searchParams.page = 1
        this.getList()
      },
      pageChange: function(pageObj) {
        this.searchParams.page = pageObj.page
        this.searchParams.pageSize = pageObj.pageSize
        this.getList()
      },
      editSubmit: function(form) {
        editRole(form.roleId, form).then((response) => {
          if (response.success) {
            this.$message({
              message: '修改用户成功！',
              type: 'success'
            })
            this.$refs.formEdit.hiden()
            this.getList({})
          }
        })
      },
      addSubmit: function(form) {
        addRole(form).then((response) => {
          if (response.success) {
            this.$message({
              message: '添加用户成功！',
              type: 'success'
            })
            this.$refs.formAdd.hiden()
            this.getList({})
          }
        })
      }
    }
  }
  </script>
<style scoped>
  .table{
    padding: 0 16px;
  }
</style>
